<!--
 * @Description: 应用名称
 * @Author: 曾祥
 * @LastEditors: seadon
 * @Date: 2021-12-15 21:25:43
 * @LastEditTime: 2022-09-23 14:48:00
-->
<template>
	<a-card class="card-style-d card-box" @click="toPath(item)">
		<div class="card-box-top">
			<img :src="item?.icon" />
		</div>
		<div class="card-box-bottom">
			<!-- <EllipsisTooltip :title="item.name" /> -->
			<a-tooltip
				:title="item?.name"
				:visible="visible"
				overlayClassName="card-box-tooltip"
				@visible-change="handleChangeVisible"
			>
				<div class="tooltip-text-content">{{ item?.name }}</div>
			</a-tooltip>
		</div>
		<div
			v-if="item?.collected"
			class="card-collected"
			@click.stop="collectionEvents(item)"
		>
			<i class="low-code iconshoucang collected"></i>
		</div>
		<div class="card-favorite" v-else @click.stop="collectionEvents(item)">
			<i class="low-code icondaishoucang card-favorite-icon"></i>
		</div>
	</a-card>
</template>

<script setup lang="ts">
import { defineProps, defineEmits, PropType, ref } from 'vue'

const visible = ref(false)

const props = defineProps({ item: Object as PropType<typing.FormBaseBo> })
const emit = defineEmits(['toPath', 'collectionEvents'])

const toPath = (item: any) => {
	emit('toPath', item)
}
const collectionEvents = (item: any) => {
	emit('collectionEvents', item)
}

const handleChangeVisible = (value: boolean) => {
	if (props.item?.name && props.item.name.length < 12) {
		visible.value = false
		return
	}
	visible.value = value
}
</script>

<style lang="less" scoped>
.card-style-d.card-box {
	&:hover {
		box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.08);
		.card-favorite {
			display: block;
			background: url('@/assets/images/card_favorite_bg.svg');
		}
	}
	:deep {
		.ant-card-body {
			display: flex;
			flex-direction: column;
			align-items: center;

			.pok-ellipsis-tooltip .tooltip-content {
				display: -webkit-box;
				white-space: pre-wrap !important;
				overflow: hidden;
				text-align: center;
				line-height: 1.1;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
		}
	}
	.card-box-top {
		margin-bottom: 8px;
		min-width: 48px;
		height: 48px;
		width: 48px;
		img {
			width: 100%;
			height: 100%;
			border-radius: 9px;
		}
	}

	.card-box-bottom {
		width: 100%;
		font-weight: 500;
		line-height: 24px;
		color: var(--bl-n900-c);
		overflow: hidden;
		display: flex;
		justify-content: center;

		.tooltip-text-content {
			display: -webkit-box;
			white-space: pre-wrap !important;
			overflow: hidden;
			text-align: center;
			line-height: 1.1;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}
	}
	.card-collected,
	.card-favorite {
		position: absolute;
		right: 5px;
	}
}
</style>
